<template>
    <div class="zs-table-page-container" v-loading="loading">
        <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
            <span>
                <el-select v-model="biProjectCode" filterable class="zs-select-md zs-space-right-sm" placeholder="项目名称">
                    <el-option v-for="item in projectList" :key="item.biProjectCode" :label="item.projectName"
                        :value="item.biProjectCode" />
                </el-select>
                <el-date-picker class="zs-space-right-sm" v-model="startDateShow" :type="pickerDate" placeholder="开始日期"
                    :clearable="false" :value-format="valueFormat" :disabled-date="disabledDateStart"
                    @change="changeDate()" />
                <el-date-picker class="zs-space-right-sm" v-model="endDateShow" :type="pickerDate" placeholder="结束日期"
                    :clearable="false" :value-format="valueFormat" :disabled-date="disabledDateEnd"
                    @change="changeDate()" />
                <el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
                    <template #reference>
                        <el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': bizSpecType != 0 }">
                            <el-icon>
                                <MoreFilled />
                            </el-icon>
                        </el-button>
                    </template>
                    <template #default>
                        <el-select v-model="bizSpecType" class="zs-select-md zs-space-right-sm zs-space-bottom-sm"
                            placeholder="是否含汽车+苹果" :teleported="false">
                            <el-option v-for="(item, index) in bizSpecTypeList" :key="index" :label="item.name"
                                :value="item.value" />
                        </el-select>
                    </template>
                </el-popover>
                <el-button class="zs-btn-plain" @click="getData()">
                    查询
                </el-button>
            </span>
            <span class="zs-layout-flex-row">
                <div class="db-btn zs-space-right-sm" :class="{ 'db-btn-primary': curTab == '日' }" @click="changeTab('日')">
                    按日
                </div>
                <div class="db-btn zs-space-right-sm" :class="{ 'db-btn-primary': curTab == '月' }" @click="changeTab('月')">
                    按月
                </div>
                <div class="db-btn zs-space-right" :class="{ 'db-btn-primary': curTab == '年' }" @click="changeTab('年')">按年
                </div>
                <el-button class="zs-btn-plain" @click="handleDownload"><el-icon class="el-icon--left">
                        <Upload />
                    </el-icon>导出</el-button>
            </span>
        </div>
        <div class="zs-card zs-table-page-content">
            <el-table :data="tableData" class="zs-table-page-main" :stripe="stripe" v-if="curTab == '日'">
                <el-table-column label="序号" width="60" :align="'center'">
                    <template #default="scope">
                        {{ scope.$index + 1 + curPageSize * (currentPage - 1) }}
                    </template>
                </el-table-column>
                <el-table-column class-name="db-table-cell-border-right" prop="" label="日期" width="120" :align="'left'">
                    <template #default="scope">
                        <el-button class="zs-link" link size="small" @click="goDetail(scope.row)">{{ scope.row.theDate
                        }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="销售额" :align="'right'">
                    <template #default="scope">
                        <el-tooltip effect="dark" :content="toThousands(scope.row.daySalesYuan)" placement="top">
                            <span>{{ toThousands(scope.row.daySales) }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column class-name="db-table-cell-border-right" label="环比上周" :align="'right'">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>环比上周</div>
                            <el-popover placement="bottom" :width="320" trigger="hover" content="（销售额-上周同日销售额）/上周同日销售额">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ scope.row.accSaleMonth == '-' ? '-' : `${scope.row.accSaleMonth}%` }}
                    </template>
                </el-table-column>
                <el-table-column label="客流量" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.dayFlow) }}
                    </template>
                </el-table-column>
                <el-table-column class-name="db-table-cell-border-right" label="环比上周" :align="'right'">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>环比上周</div>
                            <el-popover placement="bottom" :width="320" trigger="hover" content="（客流量-上周同日客流量）/上周同日客流量">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ scope.row.avgSaleMonth == '-' ? '-' : `${scope.row.avgSaleMonth}%` }}
                    </template>
                </el-table-column>
                <el-table-column label="车流量" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.trafficFlow) }}
                    </template>
                </el-table-column>
                <el-table-column class-name="db-table-cell-border-right" label="环比上周" :align="'right'">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>环比上周</div>
                            <el-popover placement="bottom" :width="320" trigger="hover" content="（车流量-上周同日车流量）/上周同日车流量">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ scope.row.accFlowMonth == '-' ? '-' : `${scope.row.accFlowMonth}%` }}
                    </template>
                </el-table-column>
                <el-table-column prop="accTrafficFlowMonth" label="星期" :align="'center'"></el-table-column>
                <el-table-column prop="yyAmountDay" label="日期标签" :align="'center'"></el-table-column>
                <!-- <el-table-column prop="" label="操作" width="100" :align="'right'">
                    <template #default="scope">
                        <el-button class="zs-link" link size="small" @click="goDetail(scope.row)">查看</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <el-table :data="tableData" class="zs-table-page-main" :stripe="stripe" v-if="curTab == '月'">
                <el-table-column label="序号" width="60" :align="'center'">
                    <template #default="scope">
                        {{ scope.$index + 1 + curPageSize * (currentPage - 1) }}
                    </template>
                </el-table-column>
                <el-table-column class-name="db-table-cell-border-right" prop="" label="日期" width="120" :align="'left'">
                    <template #default="scope">
                        <el-button class="zs-link" link size="small" @click="goDetail(scope.row)">{{ scope.row.theDate
                        }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="销售额" :align="'right'">
                    <template #default="scope">
                        <el-tooltip effect="dark" :content="toThousands(scope.row.daySalesYuan)" placement="top">
                            <span>{{ toThousands(scope.row.daySales) }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="日均销售" :align="'right'">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>日均销售</div>
                            <el-popover placement="bottom" :width="120" trigger="hover" content="销售额/经营天数">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        <el-tooltip effect="dark" :content="toThousands(scope.row.avgDaySaleYuan)" placement="top">
                            <span>{{ toThousands(scope.row.dayFlow) }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="环比上月" :align="'right'">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>环比上月</div>
                            <el-popover placement="bottom" :width="320" trigger="hover" content="（日均销售-上月日均销售）/上月日均销售">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ scope.row.trafficFlow == '-' ? '-' : `${scope.row.trafficFlow}%` }}
                    </template>
                </el-table-column> -->
                <el-table-column class-name="db-table-cell-border-right" label="同比上年" :align="'right'">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>同比上年</div>
                            <el-popover placement="bottom" :width="360" trigger="hover" content="（日均销售-上年同月日均销售）/上年同月日均销售">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ scope.row.accSaleMonth == '-' ? '-' : `${scope.row.accSaleMonth}%` }}
                    </template>
                </el-table-column>
                <el-table-column label="月坪效" :align="'right'">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>月坪效</div>
                            <el-popover placement="bottom" :width="320" trigger="hover" content="（日均销售*30）/月末起租面积">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ toThousands(scope.row.avgSaleMonth) }}
                    </template>
                </el-table-column>
                <el-table-column label="租费" :align="'right'">
                    <template #default="scope">
                        <el-tooltip effect="dark" :content="toThousands(scope.row.invrecamtlYuan)" placement="top">
                            <span>{{ toThousands(scope.row.accFlowMonth) }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column class-name="db-table-cell-border-right" label="租售比" :align="'right'">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>租售比</div>
                            <el-popover placement="bottom" :width="100" trigger="hover" content="月租费/销售额">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ scope.row.accTrafficFlowMonth == '-' ? '-' : `${scope.row.accTrafficFlowMonth}%` }}
                    </template>
                </el-table-column>
                <el-table-column prop="yyAmountDay" label="营业时间" :align="'right'"></el-table-column>
                <!-- <el-table-column prop="" label="操作" width="100" :align="'right'">
                    <template #default="scope">
                        <el-button class="zs-link" link size="small" @click="goDetail(scope.row)">查看</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <el-table :data="tableData" class="zs-table-page-main" :stripe="stripe" v-if="curTab == '年'">
                <el-table-column label="序号" width="60" :align="'center'">
                    <template #default="scope">
                        {{ scope.$index + 1 + curPageSize * (currentPage - 1) }}
                    </template>
                </el-table-column>
                <el-table-column class-name="db-table-cell-border-right" prop="" label="日期" width="120" :align="'left'">
                    <template #default="scope">
                        <el-button class="zs-link" link size="small" @click="goDetail(scope.row)">{{ scope.row.theDate
                        }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="销售额" :align="'right'">
                    <template #default="scope">
                        <el-tooltip effect="dark" :content="toThousands(scope.row.daySalesYuan)" placement="top">
                            <span>{{ toThousands(scope.row.daySales) }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column class-name="db-table-cell-border-right" label="同比上年" :align="'right'">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>同比上年</div>
                            <el-popover placement="bottom" :width="300" trigger="hover" content="（销售额-去年销售额）/去年销售额">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ scope.row.dayFlow == '-' ? '-' : `${scope.row.dayFlow}%` }}
                    </template>
                </el-table-column>
                <el-table-column label="月均销售" :align="'right'">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>月均销售</div>
                            <el-popover placement="bottom" :width="300" trigger="hover" content="（销售额/经营天数）*30">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        <el-tooltip effect="dark" :content="toThousands(scope.row.avgDaySaleYuan)" placement="top">
                            <span>{{ toThousands(scope.row.trafficFlow) }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="月均坪效" :align="'right'">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>月均坪效</div>
                            <el-popover placement="bottom" :width="380" trigger="hover" content="（销售额/经营天数*30）/年末起租面积">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ toThousands(scope.row.accSaleMonth) }}
                    </template>
                </el-table-column>
                <el-table-column label="租费" :align="'right'">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>租费</div>
                            <el-popover placement="bottom" :width="300" trigger="hover" content="（年租费/经营天数）*30">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        <el-tooltip effect="dark" :content="toThousands(scope.row.invrecamtlYuan)" placement="top">
                            <span>{{ toThousands(scope.row.avgSaleMonth) }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column class-name="db-table-cell-border-right" label="租售比" :align="'right'">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>租售比</div>
                            <el-popover placement="bottom" :width="120" trigger="hover" content="月均租费/月均销售">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ scope.row.accFlowMonth == '-' ? '-' : `${scope.row.accFlowMonth}%` }}
                    </template>
                </el-table-column>
                <el-table-column prop="yyAmountDay" label="营业时间" :align="'right'"></el-table-column>
                <!-- <el-table-column prop="" label="操作" width="100" :align="'right'">
                    <template #default="scope">
                        <el-button class="zs-link" link size="small" @click="goDetail(scope.row)">查看</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <div class="zs-text-gray-dark zs-text-sm zs-space-top" v-if="curTab == '日'">*销售额：万元；客流量：万人次；车流量：车次</div>
            <div class="zs-text-gray-dark zs-text-sm zs-space-top" v-if="curTab == '月'">*销售额，日均销售，月租费：万元；月坪效：元/㎡/月</div>
            <div class="zs-text-gray-dark zs-text-sm zs-space-top" v-if="curTab == '年'">*销售额，月均销售，月均租费：万元；月均坪效：元/㎡/月</div>
            <div class="zs-space-top-sm zs-table-page-pagination">
                <el-pagination v-model:currentPage="currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes"
                    :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<script setup>
import dbPublicApi from '@/api/dbPublic'
import detailApi from '@/api/Manage/Business/detailPages'
import { dateFormat, toThousands } from '@/utils/number-util'
import { downloadNewFile } from "@/utils/publicUtils"
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
let store = useStore()
const stripe = ref(true)
const route = useRoute().query

const loading = ref(false)

let biProjectCode = ref(route.biProjectCode)
const updateDate = route.updateDate
const tabPermi = route.tabPermi
let curTab = ref(route.curTab)
let startDate = ref('')
let endDate = ref('')
let startDateShow = ref('')
let endDateShow = ref('')
let valueFormat = ref('YYYY-MM-DD')
let pickerDate = ref('date')
let bizSpecType = ref(0)
let bizSpecTypeList = ref([{ value: 0, name: '全部' }, { value: 1, name: '不含汽车' }, { value: 2, name: '不含苹果' }, { value: 3, name: '不含汽车+苹果' }])

let projectList = ref([])
const getPorjectList = async () => {
    await dbPublicApi.queryProjectPcApi({ dataTime: updateDate, resourceKey: tabPermi }).then((res) => {
        if (res.data.code == 200) {
            projectList.value = res.data.data
        }
    })
}

const changeTab = (value) => {
    loading.value = true
    curTab.value = value
    tableData.value = []
    init()
}



const curPageSizes = ref(store.state.uiPageSizes)
let curPageSize = ref(store.state.uiPageSizeDefault)
// 分页
let currentPage = ref(1)
const total = ref(0)
const handleSizeChange = (val) => {
    curPageSize.value = val
    getList()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getList()
}


// 未选择日期组件时，使用url参数查询，选择了日期之后，使用页面选择的日期（ps: 为了默认进来显示出【开始日期】【结束日期】）
const isSelect = ref(false)
const changeDate = () => {
    isSelect.value = true
    console.log(isSelect.value)
}
const tableData = ref([])
const getList = () => {
    if (isSelect.value && ((startDateShow.value && !endDateShow.value) || (!startDateShow.value && endDateShow.value))) {
        ElMessage({
            message: '请选择开始日期和结束日期',
            type: 'warning',
        })
        return false
    }
    loading.value = true
    let start = isSelect.value ? startDateShow.value : startDate.value
    let end = isSelect.value ? endDateShow.value : endDate.value
    detailApi.wholeSceneListApi({ biProjectCode: biProjectCode.value, startDate: start, endDate: end, timeType: curTab.value, bizSpecType: bizSpecType.value, pageNo: currentPage.value, pageSize: curPageSize.value }).then((res) => {
        if (res.data.code == 200) {
            loading.value = false
            tableData.value = res.data.data.childList
            total.value = res.data.data.totalCount
        }
    })
}
const getData = () => {
    currentPage.value = 1
    getList()
}

const handleDownload = async () => {
    const fileName = `整场${curTab.value}列表.xls`
    let fileData
    let start = isSelect.value ? startDateShow.value : startDate.value
    let end = isSelect.value ? endDateShow.value : endDate.value
    await detailApi.wholeSceneExportApi({ biProjectCode: biProjectCode.value, startDate: start, endDate: end, timeType: curTab.value }).then(res => {
        fileData = res.data
    })
    downloadNewFile(fileData, fileName)
}


const goDetail = (row) => {
    console.log(row)
    router.push({
        path: '/page/routeController/index',
        query: {
            rid: 'Manage/Business/salesVolume/wholeSceneBrand',
            rTitle: '整场品牌列表',
            biProjectCode: biProjectCode.value,
            dataTime: row.theDate,
            tabPermi: tabPermi,
            curTab: curTab.value,
        },
    })
}

const disabledDateStart = (date) => {
    return date.getTime() < new Date('2019-05-01').getTime() - 24 * 60 * 60 * 1000 || date.getTime() > new Date(updateDate).getTime()
}

const disabledDateEnd = (date) => {
    return date.getTime() < new Date('2019-05-01').getTime() - 24 * 60 * 60 * 1000 || date.getTime() > new Date(updateDate).getTime()
}

const init = () => {
    if (curTab.value == '日') {
        pickerDate.value = 'date'
        valueFormat.value = 'YYYY-MM-DD'

        startDate.value = dateFormat(new Date(new Date(updateDate).getTime() - 30 * 24 * 60 * 60 * 1000), 'YYYY-MM-DD')
        endDate.value = updateDate

        if (new Date(startDate.value).getTime() < new Date('2019-05-01').getTime()) {
            startDate.value = '2019-05-01'
        }
    }
    if (curTab.value == '月') {
        pickerDate.value = 'month'
        valueFormat.value = 'YYYY-MM'

        // 先将月份+1 再将年份-2 获取近24个月 如（2021-10到2023-9）
        let data = new Date(updateDate)
        data.setMonth(data.getMonth() + 1)
        data.setFullYear((data.getFullYear() - 2))
        startDate.value = dateFormat(data, 'YYYY-MM')
        endDate.value = dateFormat(new Date(updateDate), 'YYYY-MM')

        if (new Date(startDate.value).getTime() < new Date('2019-05').getTime()) {
            startDate.value = '2019-05'
        }
    }
    if (curTab.value == '年') {
        pickerDate.value = 'year'
        valueFormat.value = 'YYYY'

        const year = new Date(updateDate).getFullYear() - 20
        startDate.value = year.toString()
        endDate.value = new Date(updateDate).getFullYear().toString()

        if (new Date(startDate.value).getTime() < new Date('2019').getTime()) {
            startDate.value = '2019'
        }
    }
    if (isSelect.value) {
        startDateShow.value = startDate.value
        endDateShow.value = endDate.value
    }
    getPorjectList()
    getData()
}
init()
</script>

<style scoped lang="scss"></style>
